<template>
    <h1>vue2一个人的信息</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2 v-show="person.sex">性别：{{person.sex}}</h2>
    <h2>爱好：{{person.hobby}}</h2>
<br>
  <button @click="addSex">添加一个sex属性</button>
  <button @click="deleteName">删除一个name属性</button>
  <button @click="updateHobby">修改一个爱好</button>
</template>
<script>
export default {
name: 'demo1',
  //vue2
  data(){
    return {
      person:{
        name:`张三`,
        age:18,
        hobby:[`抽烟`,`喝酒`]
      }
    }
  },
  methods: {
    addSex() {
      this.person.sex=`女`
      this.$set(this.person,'sex',`女`)
     //或者 Vue.set(this.person,'sex',`女`)
    },
    deleteName() {
      this.$delete(this.person,'name')
      // Vue.(this.person,'name')
    },
    updateHobby() {
      // this.$set(this.person,'hobby',0,'逛街')
      this.person.hobby.splice(0,1,'逛街')
    }
  }
}
</script>
<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
